<template>
  <div>
    <el-table
      ref="table"
      :data='tableData'
      :stripe='stripe'
      :border='border'
      :cell-style='cellStyle'
      :header-cell-style='headCellStyle'
      :row-style='rowStyle'
      :header-row-style='headRowStyle'
      :tree-props="treeTable"
      :row-key="rowKey"
      @selection-change='handleSelectionChange'
    >
      <el-table-column
        v-if='selection'
        align='center'
        type='selection'
        reserve-selection
        width='45'>
      </el-table-column>
       <el-table-column
        v-if='number'
        align='center'
        label="序号"
        width='45'>
        <template slot-scope="scope">
          <span>{{(page.current - 1) * page.size + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <template v-for='column in options'>
        <el-table-column
          :key='column.key'
          :prop='column.key'
          :label='column.label'
          :width="column.width"
          :show-overflow-tooltip="column.key != 'handle'"
        >
          <template #default='{row}'>
            <slot :name='column.key' v-bind='{row}'>
              {{row[column.key]}}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'hawkTable',
  data(){
    return {
    }
  },
  props: {
    //列表数据
    tableData: {
      type: Array,
      default:() => {
        return []
      }
    },
    //斑马纹
    stripe: {
      type: Boolean,
      default: true
    },
    //边框
    border: {
      type: Boolean,
      default: false
    },
    //格子样式
    cellStyle: {
      type: Object,
      default:() => {
        return {padding: '8px 0'}
      }
    },
    //头部格子样式
    headCellStyle: {
      type: Object,
      default:() => {
        return {}
      }
    },
    //行样式
    rowStyle: {
      type: Object,
      default:() => {
        return {}
      }
    },
    //头部行样式
    headRowStyle: {
      type: Object,
      default:() => {
        return {}
      }
    },
    //多选框
    selection: {
      type: Boolean,
      default: true
    },
    number: {
      type: Boolean,
      default: false
    },
    //表格格式
    options: {
      type: Array,
      default:() => {
        return []
      }
    },
    //是否显示导出按钮
    isExport: {
      type: Boolean,
      default: true
    },
    //是否显示批量删除按钮
    batchDelete: {
      type: Boolean,
      default: true
    },
    //是否显示分页
    pagination: {
      type: Boolean,
      default: true
    },
    treeTable:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    rowKey:{
      type:String,
      default:"id"
    },
    height:{
      type:Number,
      default:0
    },
    page:{
      type:Object,
      default:()=>{
        return {
          current:1,
          size:10
        }
      }
    },
    value:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  methods:{
    handleSelectionChange(val) {
      console.log(this.value)
      this.$emit('input',val)
    },
  },
  watch:{
    value(val){
      if(val.length == 0){
        this.$refs.table.clearSelection()
      }
    }
  }
}
</script>

<style scoped>

</style>